Cloudscape Design System を導入した Next.js + Amplify アプリケーションの Top Navigation コンポーネントで Cognito からのサインアウトアクションを実装する

'use client'

import Image from "next/image";
import { Authenticator } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';
import outputs from '@/amplify_outputs.json';
import '@aws-amplify/ui-react/styles.css';

import "@cloudscape-design/global-styles/index.css"
import TopNavigation from "@cloudscape-design/components/top-navigation";
import Button from "@cloudscape-design/components/button"

Amplify.configure(outputs);

export default function Home() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <div>
          <TopNavigation
            identity={{
              href: "#",
              title: "Service",
            }}
            utilities={[
              {
                type: "button",
                text: "Link",
                href: "https://example.com/",
                external: true,
                externalIconAriaLabel: " (opens in a new tab)"
              },
              {
                type: "button",
                iconName: "notification",
                title: "Notifications",
                ariaLabel: "Notifications (unread)",
                badge: true,
                disableUtilityCollapse: false
              },
              {
                type: "menu-dropdown",
                iconName: "settings",
                ariaLabel: "Settings",
                title: "Settings",
                items: [
                  {
                    id: "settings-org",
                    text: "Organizational settings"
                  },
                  {
                    id: "settings-project",
                    text: "Project settings"
                  }
                ]
              },
              {
                type: "menu-dropdown",
                text: "Customer Name",
                description: "email@example.com",
                iconName: "user-profile",
                items: [
                  { id: "profile", text: "Profile" },
                  { id: "preferences", text: "Preferences" },
                  { id: "security", text: "Security" },
                  {
                    id: "support-group",
                    text: "Support",
                    items: [
                      {
                        id: "documentation",
                        text: "Documentation",
                        href: "#",
                        external: true,
                        externalIconAriaLabel:
                          " (opens in new tab)"
                      },
                      { id: "support", text: "Support" },
                      {
                        id: "feedback",
                        text: "Feedback",
                        href: "#",
                        external: true,
                        externalIconAriaLabel:
                          " (opens in new tab)"
                      }
                    ]
                  },
                  { id: "signout", text: "Sign out" }
                ]
              }
            ]}
          />
          <Button>aaa</Button>
        </div>
      )}
    </Authenticator>
  );
}

:

import { signOut } from "aws-amplify/auth"

Amplify.configure(outputs);

export default function Home() {
  const handleUtilityClick = async (e: CustomEvent) => {
    if (e.detail.id === 'signout') {
      await signOut();
    }
  };

  return (
    <Authenticator>
      {({ signOut, user }) => (
        <div>
          <TopNavigation
            identity={{
              href: "#",
              title: "Service",
            }}
            utilities={[

:

              {
                type: "menu-dropdown",
                text: "Customer Name",
                description: "email@example.com",
                iconName: "user-profile",
                onItemClick: handleUtilityClick,
                items: [
                  { id: "profile", text: "Profile" },
                  { id: "preferences", text: "Preferences" },

:

                  { id: "signout", text: "Sign out" }
                ]
              }
            ]}
          />
          <Button>aaa</Button>
        </div>
      )}
    </Authenticator>
  );
}